<template>
  <div class="app-container">
    <span class="container">
      编码类型
      <el-dropdown @command="getDropdown" style="margin-left: 25px" >
      <el-button type="primary" size="small">
        {{type}}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item command="全部">全部</el-dropdown-item>
        <el-dropdown-item command="工程项目">工程项目</el-dropdown-item>
        <el-dropdown-item command="企业项目">企业项目</el-dropdown-item>




      </el-dropdown-menu>
    </el-dropdown>
      <el-button type="primary" size="small" style="float: right; margin-right: 90px ">检查</el-button>
    </span>

    <el-row type="flex" justify="center">
      <el-col  >
          <e-charts class="chart" :option="option1"></e-charts>
      </el-col>
      <el-col >
          <e-charts class="chart" :option="option2"></e-charts>
        </el-col>
    </el-row>
    <el-row  type="flex" justify="center" style="margin-right: 20px; margin-left: 20px">
      <el-col >
        <el-table
          :data="handleList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          :show-header="true"
          style="width: 100%">
          <el-table-column
            prop="no"
            label="序号"
            >
          </el-table-column>
          <el-table-column
            prop="num"
            label="编码"
            >
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            >
          </el-table-column>
          <el-table-column
            prop="quality"
            label="质量"
            >
          </el-table-column>
          <el-table-column
            prop="creator"
            label="创建人"
            >
          </el-table-column>
          <el-table-column
            prop="date"
            label="创建时间"
            >
          </el-table-column>
          <el-table-column
            prop="reason"
            label="分析结果"
            >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" justify="space-between" style="margin-right: 20px; margin-left: 20px">
      <div>
        <span style="font-size: 13px; color: #5f6063; margin-right: 10px ">显示第 {{itemFrom}} 条到第 {{itemTo}} 条记录,总共 {{listLength}} 条记录</span>
        <span style="font-size: 13px; color: #5f6063; margin-right: 5px  ">每页显示</span>
        <el-dropdown placement="top-end" @command="getPageSize">
          <el-button  size="small" >
            {{pageSize}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command=30>30</el-dropdown-item>
            <el-dropdown-item command=20>20</el-dropdown-item>
            <el-dropdown-item command=10>10</el-dropdown-item>
            <el-dropdown-item command=5>5</el-dropdown-item>
            <el-dropdown-item command=1>1</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span style="font-size: 13px; color: #5f6063; margin-left: 5px ">条记录</span>
      </div>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="handleList.length">
        </el-pagination>
      </div>
    </el-row>

  </div>

</template>

<script>
export default {
  name: "Duplicate",
  data() {
    return {
      //类型下拉框选中的值
      type: '全部',
      //总览表数据
      data1: [
        { value: 3, name: "错误",label:{color:'#d32b40'} },
        { value: 97, name: "正确",label:{color:'#14a11e'} },
      ],
      //编码问题表数据
      data2: [
        { value: 5, name: "重复错误",label:{color:'#838388'} },
        { value: 5, name: "长度错误",label:{color:'#fac858'}},
        { value: 1, name: "未知错误",label:{color:'#3dbee5'} },
        { value: 10, name: "空值错误",label:{color:'#229cff'} },
        { value: 79, name: "类型错误",label:{color:'#fc8452'} },
      ],
      // 表格总数据
      handleList: [ {
        no: '1',
        num: 'NGP-XD-EAB-10001',
        type: '工程项目',
        quality: '错误',
        creator: 'staff-001',
        date: '2022-5-14',
        reason: '重复错误'
      },
        {
          no: '2',
          num: 'GOP-XB-EAB-10021',
          type: '企业项目',
          quality: '错误',
          creator: 'WangLi',
          date: '2022-5-14',
          reason: '长度错误'
        },
        {
          no: '3',
          num: 'DJD-JU-QSC-10003',
          type: '工程项目',
          quality: '错误',
          creator: 'LiQiang',
          date: '2022-5-14',
          reason: '未知错误'
        },
        {
          no: '4',
          num: 'DYD-IU-QSC-10305',
          type: '工程项目',
          quality: '错误',
          creator: 'staff-001',
          date: '2022-5-14',
          reason: '空值错误'
        },
        {
          no: '5',
          num: 'DAI-QH-QWI-10903',
          type: '工程项目',
          quality: '错误',
          creator: 'staff-004',
          date: '2022-5-14',
          reason: '类型错误'
        },
        {
          no: '6',
          num: 'FKA-WKD-KO-10032',
          type: '工程项目',
          quality: '正确',
          creator: 'Fanwen',
          date: '2022-5-14',
          reason: '编码格式正确'
        },
        {
          no: '7',
          num: 'NGP-XD-EAB-10001',
          type: '工程项目',
          quality: '错误',
          creator: 'LiJia',
          date: '2022-5-14',
          reason: '重复错误'
        },
        {
          no: '8',
          num: 'GOP-XB-EAB-10021',
          type: '企业项目',
          quality: '错误',
          creator: 'HuangLing',
          date: '2022-5-14',
          reason: '长度错误'
        },
        {
          no: '9',
          num: 'DJD-JU-QSC-10003',
          type: '工程项目',
          quality: '错误',
          creator: 'JiXin',
          date: '2022-5-14',
          reason: '未知错误'
        },
        {
          no: '10',
          num: 'DYD-IU-QSC-10305',
          type: '工程项目',
          quality: '错误',
          creator: 'staff-001',
          date: '2022-5-14',
          reason: '空值错误'
        },
        {
          no: '11',
          num: 'DAI-QH-QWI-10903',
          type: '工程项目',
          quality: '错误',
          creator: 'ChenQi',
          date: '2022-5-14',
          reason: '类型错误'
        },
        {
          no: '12',
          num: 'FKA-WKD-KO-10032',
          type: '工程项目',
          quality: '正确',
          creator: 'CaoGuang',
          date: '2022-5-14',
          reason: '编码格式正确'
        },

      ],
      // 当前页
      currentPage: 1,
      // 每页多少条
      pageSize: 5,
    };
  },
  methods:{
    //获取下拉菜单内容
    getDropdown(command){
        this.type = command
        },
    getPageSize(command){
        this.pageSize = command
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.currentPage=1
    },
    // 分页
    // 每页多少条
    /*handleSizeChange(val) {
      this.pageSize = val;
    },*/
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  computed: {
    //总览表
    option1(){
      return {
        title: {
          text: "总览",
          left: "center"
        },
        color: [
          '#d32b40','#14a11e'],
        tooltip: {
          trigger: "item",
          formatter: function(data){
            return '原因：'+data.name +'</br>'
                    +'数量：'+data.value+'</br>'
                     + '百分比：'+(parseInt(data.percent)) + '%'

          }
      //"{a} <br/>{b} : {c} ({d}%)"
        },

        series: [
          {
            name: "总览",
            labelLine:{
              show: false
            },
            label: {
              formatter: function(data){
                var arr = [
                  '{a|'+data.name+'}',
                  '{b|'+(parseInt(data.percent)) + '%'+'}',
                ]
                return arr.join('\n')
              },
              textStyle: {
                rich: {
                  a:{
                    verticalAlign:'top',
                    align:'center',
                  },
                  b:{
                    align:'center',

                  }
                }
              }
            },
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: this.data1,
            emphasis: {

                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    },
    //编码问题表
    option2(){
      return {
        title: {
          text: "编码问题",
          left: "center"
        },
        color: ['#838388', '#fac858',
           '#3dbee5', '#229cff',
          '#fc8452'],
        tooltip: {
          trigger: "item",
          formatter: function(data){
            return '原因：'+data.name +'</br>'
              +'数量：'+data.value+'</br>'
              + '百分比：'+(parseInt(data.percent)) + '%'

          }
          //"{a} <br/>{b} : {c} ({d}%)"
        },

        series: [
          {
            name: "编码问题",
            labelLine:{
              show: false
            },
            label: {
              formatter: function(data){
                var arr = [
                  '{a|'+data.name+'}',
                  '{b|'+(parseInt(data.percent)) + '%'+'}',
                ]
                return arr.join('\n')
              },
              textStyle: {
                rich: {
                  a:{
                    verticalAlign:'top',
                    align:'center',
                  },
                  b:{
                    align:'center',
                  }
                }
              }
            },
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: this.data2,
            emphasis: {

              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    },
    // 表格记录总条数，根据接口获取数据长度(注意：这里不能为空)
    listLength(){
      return this.handleList.length
    },
    //记录
    itemFrom(){
      return (this.currentPage-1)*this.pageSize+1
    },
    //记录
    itemTo(){
      return this.currentPage*this.pageSize < this.listLength ? this.currentPage*this.pageSize
        : this.listLength
    }
  },
  /*mounted() {
    this.$http.get('/json/handle.json')
      .then(({data}) => {
        if (data.status === 200) {
          this.handleList = data.data;
        }else{
          console.log('没有获取到数据')
        }
      })
      .catch((err) => {
        console.log('获取数据出错', err)
      });
  }*/

};
</script>

<style lang="scss" scoped>

.el-icon-arrow-down {
  font-size: 12px;
}
.container{
  margin-left: 30px;
  font-size: 14px;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.chart {
  margin-top: 10px;
  height: 270px;
}
</style>
